<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'项目规划管理'"
      :secondTitles="['项目规划数量', '投资项目数', '投资完成情况']"
      :slotWidth="[33, 33, 33]"
    >
      <template #left>
        <div class="w-100 h-100">
          <xmghsl :selectValue="left_value"></xmghsl>
        </div>
      </template>
      <template #middle>
        <tzxms />
      </template>
      <template #right>
        <tzwcqk :typeValue="type_value" :yearValue="year_value" :monthValue="month_value"/>
      </template>

      <template #left_control>
        <proSelect
          :optionsData="useOptions().projectTypeList"
          :defaultSelectValue="0"
          v-model:select-value="left_value"
          :width="240"
        >
        </proSelect>
      </template>

      <template #right_control>
        <proSelect
          :optionsData="typeList"
          :defaultSelectValue="0"
          v-model:select-value="type_value"
          :width="120"
        >
        </proSelect>

        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="useOptions().nowYear()"
          v-model:select-value="year_value"
          :width="120"
        >
        </proSelect>

        <proSelect
          v-if="type_value === 1"
          :optionsData="
            useOptions().month.map((label, index) => ({
              label,
              value: index + 1,
            }))
          "
          :defaultSelectValue="1"
          v-model:select-value="month_value"
          :width="120"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import xmghsl from "./xmghsl.vue";
import tzxms from "./tzxms.vue";
import tzwcqk from "./tzwcqk.vue";
import containTemplete from "@/components/project/containTemplete.vue";
import { useOptions } from "@/hook/useOptions";

const left_value = ref();
const type_value = ref(0)
const year_value = ref(2024);
const month_value = ref(1);
const typeList = ref([
  { label: "年度", value: 0 },
  { label: "月度", value: 1 },
]);
</script>

<style scoped lang="less">

</style>
